@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}
@function changePxToRem($px) {
  @return ($px/16)+rem;
}

@function changePxToPercent($px,$parent){
  @return percentage($px/$parent);
}
@mixin fontSizeRem($px, $rem:16) {
  font-size:($px/$rem)+rem;
}
@mixin border-top-style {
  border-top:2px solid rgba(99,245,245,1);
}
@mixin trapezoid($height:33px,$width:19px,$deg:30deg){
    position:absolute;
    &:before{
      content:'';
      display:block;
      width:$width;
      height:$height;
      position:absolute;
      transform:skewX($deg);
      background:rgba(53,128,128,1);
      left:-$width;
      top:0;
      transform-origin:100% 0;
      z-index:-1;
  }
    &:after{
        content:'';
        display:block;
        width:$width;
        height:$height;
        position:absolute;
        transform:skewX(-$deg);
        background:rgba(53,128,128,1);
        top:0;
        right:-$width;
        transform-origin:100% 0;
        z-index:-1;
    }
}

@mixin progress-gradient($color:rgba(92,157,92,1)){
  background:-webkit-repeating-linear-gradient(left,$color 0,$color 5px,transparent 5px,transparent 10px);
}
